<template>
  <div class="user-management">
    <a-card>
      <a-modal>

      </a-modal>
      <!-- 筛选表单 -->
      <a-form layout="inline" :model="searchForm" @finish="handleSearch">
        <a-form-item label="用户名">
          <a-input
            style="width: 160px"
            v-model:value="searchForm.username"
            placeholder="请输入用户名"
          />
        </a-form-item>
        <a-form-item label="状态">
          <a-select
            v-model:value="searchForm.status"
            placeholder="请选择状态"
            style="width: 160px"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button style="margin-left: 8px" @click="resetSearch"
            >重置</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px">
      <!-- 用户表格 -->
      <a-table
        bordered
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :columns="columns"
        :data-source="userData"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        row-key="id"
      >
        <template v-slot:bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? "启用" : "禁用" }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" size="small" @click="handleEdit(record)"
              >编辑</a-button
            >
            <a-button
              type="link"
              size="small"
              danger
              @click="handleDelete(record)"
              >删除</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { message } from "ant-design-vue";

const selectedRowKeys = ref([]); // 选中的行key
const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  selectedRowKeys = selectedRowKeys;
};
// 表格列定义
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 80,
  },
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "状态",
    key: "status",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
    width: 150,
  },
];

// 搜索表单
const searchForm = reactive({
  username: "",
  status: "",
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
});

const loading = ref(false);
const userData = ref([]);

// 获取用户数据
const fetchUserData = async () => {
  loading.value = true;
  try {
    setTimeout(() => {
      // 这里应该是API调用，暂时用模拟数据
      const mockData = Array.from({ length: 50 }, (_, i) => ({
        id: i + 1,
        username: `user${i + 1}`,
        name: `用户${i + 1}`,
        status: i % 2,
        createTime: new Date().toLocaleString(),
      }));
      // 模拟筛选
      let filteredData = mockData;
      if (searchForm.username) {
        filteredData = filteredData.filter((item) =>
          item.username.includes(searchForm.username)
        );
      }
      if (searchForm.status !== "") {
        filteredData = filteredData.filter(
          (item) => item.status === parseInt(searchForm.status)
        );
      }
      userData.value = filteredData.slice(
        (pagination.current - 1) * pagination.pageSize,
        pagination.current * pagination.pageSize
      );
      pagination.total = filteredData.length;
      loading.value = false;
    }, 300);
  } catch (error) {
    message.error("获取用户数据失败");
    console.error(error);
  } finally {
  }
};

// 搜索
const handleSearch = () => {
  fetchUserData();
};

// 重置搜索
const resetSearch = () => {
  searchForm.username = "";
  searchForm.status = "";
  handleSearch();
};

// 表格分页、排序、筛选变化
const handleTableChange = (pag, filters, sorter) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  fetchUserData();
};

// 编辑用户
const handleEdit = (record) => {
  console.log("编辑用户:", record);
  message.info(`编辑用户 ${record.username}`);
};

// 删除用户
const handleDelete = (record) => {
  console.log("删除用户:", record);
  message.warning(`删除用户 ${record.username}`);
};

onMounted(() => {
  fetchUserData();
});
</script>

<style scoped>
</style>